.header{
    width: 88%;
    display: flex;
    justify-content: space-between;
    margin: 1em auto;
    img{
        width: 1.5em;
    }
}

.input-box{
    margin: 1.5em auto;
    width: 85%;
    height: 3.5em;
    position: relative;
    img{
        position: absolute;
        width: 1.1em;
        z-index: 10;
        top: 1.2em;
        left: 1em;
    }
    .search{
        width: 100%;
        height: 100%;
        border: 1px solid #2d353d;
        border-radius: 50px;
        background: #2d353d;
        color: #9da3b4;
        padding-left: 2.5em;
    }
}

.teamone{
    margin-left: 2em;
    border-bottom: 2px solid #2f343c;
    .title{
        display: flex;
        justify-content: space-between;
        p{
            letter-spacing: 1px;
        }
        p:first-child{
            color: #ffffff;
            font-size: 16px;
            margin-left: 2px;
        }
        p:last-child{
            color: #a2a8ba;
            font-size: 13px;
            padding-right: 2em;
            line-height: 22px;
            img{
                width: 8px;
                height: 13px;
                margin-top: -4px;
                margin-left: 10px;
            }
        }        
    }
    .boxe{
        width: 106%;
        height: 9.5em;
        overflow: hidden;
        margin-top: 1em;
        margin-left: -2em;
        
        .wrap{
            width: 100%;
            height: 10em;
            overflow: auto;
            position: relative;
            overflow: auto;
           
            
            .content{
                display: flex;
                width: 80em;
                height: 10em;
                margin-left: 2em;
                
                .box{
                    width: 5.5em;
                    margin-right: 1em;
                    p{
                        color: #ffffff;
                        margin-top: 5px;
                        font-size: 1em;
                        font-family: OSBold;
                    }
                }
            } 
        }  
    }
    @media screen and (max-width: 380px) {
        margin-left: 1.5em;
        .title>p:last-child{
            padding-right: 1.5em;
        }
    }
}

.teamtwo{
    margin-left: 2em;
    border-bottom: 2px solid #2f343c;
    margin-top: 2em;
    .title{
        display: flex;
        justify-content: space-between;
        p{
            letter-spacing: 1px;
        }
        p:first-child{
            color: #ffffff;
            font-size: 16px;
            margin-left: 2px;
        }
        p:last-child{
            color: #a2a8ba;
            font-size: 13px;
            padding-right: 2em;
            line-height: 22px;
            img{
                width: 8px;
                height: 13px;
                margin-top: -4px;
                margin-left: 10px;
            }
        }        
    }
    .boxe{
        width: 106%;
        height: 9.5em;
        overflow: hidden;
        margin-top: 1em;
        margin-left: -2em;
        .wrap{
            width: 100%;
            height: 10em;
            overflow: auto;
            position: relative;
            overflow-y: hidden;
            overflow: auto;
            .content{
                display: flex;
                width: 80em;
                height: 10em;
                margin-left: 2em;
                .box{
                    width: 5.5em;
                    margin-right: 1em;
                    p{
                        color: #ffffff;
                        margin-top: 5px;
                        font-size: 1em;
                        font-family: OSBold;
                    }
                }
            } 
        }  
    }
    @media screen and (max-width: 380px) {
        margin-left: 1.5em;
        .title>p:last-child{
            padding-right: 1.5em;
        }
    }
}

.teamthr{
    margin: 2em 2em 0em 2em;
    .title{
        display: flex;
        justify-content: space-between;
        p{
            letter-spacing: 1px;
        }
        p:first-child{
            color: #ffffff;
            font-size: 16px;
            margin-left: 2px;
        }
        p:last-child{
            color: #a2a8ba;
            font-size: 13px;
            line-height: 22px;
            img{
                width: 8px;
                height: 13px;
                margin-top: -4px;
                margin-left: 10px;
            }
        }        
    }
    .boxe{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 2em;
        .box{
            width: 30%;
            margin-bottom: 3em;
            p{
                font-size: 0.9em;
            }
            p:nth-child(2){
                color: #ffffff;
                font-family: OSBlod;
                margin-top: 1em;
            }
            p:last-child{
                color: #5d637c;
                margin-top: 2px;
                
            }      
        }
    }
    @media screen and (max-width: 380px) {
        margin: 2em 1.5em 0em 1.5em;
    }
    @media screen and (max-width: 350px) {
        .boxe>.box>p{
            font-size: 0.8em;
        }
    }
}

.teamfour{
    
    margin-left: 2em;
    margin-top: 1em;
    border-bottom: 2px solid #2f343c;
    border-top: 2px solid #2f343c;
    padding-top: 2em;
    .title{
        display: flex;
        justify-content: space-between;
        p{
            color: #ffffff;
            font-size: 16px;
            margin-left: 2px;
            letter-spacing: 1px;
        }
    }
    .boxe{
        display: flex;
        width: 90%;
        flex-wrap: wrap;
        margin-top: 0.5em;
        margin-bottom: 1.5em;
        .box{
            border: 1px solid #f54d82;
            color: #f54d82;
            height: 25px;
            border-radius: 50px;
            margin-right: 10px;
            margin-top: 10px;
            p{
                font-size: 0.7em;
                font-family: OSBold;
                padding: 0em 1.3em 0em 1.3em;
                line-height: 23px;
                letter-spacing: 1px;
            }
        }
        .box:nth-child(2){
            border-color: #529f76;
            color: #529f76;
        }
        .box:nth-child(3){
            border-color: #d35158;
            color: #d35158;
        }
        .box:nth-child(4){
            border-color: #9060e8;
            color: #9060e8;
        }
        .box:nth-child(5){
            border-color: #807e43;
            color: #807e43;
        }
        .box:nth-child(6){
            border-color: #3dd8ea;
            color: #3dd8ea;
        }
        .box:nth-child(7){
            border-color: #e48618;
            color: #e48618;
        }
    }

    @media screen and (max-width: 380px) {
        margin-left: 1.5em;
    }
}

.teamfif{
    margin: 2em 0em 2em 2em;
    .title{
        display: flex;
        justify-content: space-between;
        p{
            letter-spacing: 1px;
        }
        p:first-child{
            color: #ffffff;
            font-size: 16px;
            margin-left: 2px;
        }
        p:last-child{
            color: #a2a8ba;
            font-size: 13px;
            padding-right: 2em;
            line-height: 22px;
            img{
                width: 8px;
                height: 13px;
                margin-top: -4px;
                margin-left: 10px;
            }
        }        
    }

    .boxe{
        width: 106%;
        overflow: hidden;
        height: 14em;
        margin-left: -2em;
        .wrap{
            width: 100%;
            position: relative;
            overflow-y: hidden;
            overflow: auto;
            height: 15em;
            .content{
                display: flex;
                width: 80em;
                margin-left: 2em;
                .borbox{
                    display: flex;
                    background-color: #2a313a;
                    border-radius:10px;
                    width: 21em;
                    margin-right: 1em;
                    margin-top: 3em;
                    .lebox{
                        width: 40%;
                        position: relative;
                        img{
                            position: absolute;
                            width: 73%;
                            left: 20px;
                            top: -18px;
                            z-index: 100;
                        }
                    }
                    .box{
                        width: 54%;
                        .title{
                            width: 102%;
                            display: flex;
                            justify-content: space-between;
                            margin-top: 10px;
                            p{
                                font-size: 1em;
                                color: #ffffff;
                            }
                            img{
                                width: 10%;
                                height: 5%;
                                padding-top: 10px;
                            }
                        }
                        .author{
                            color: #5d637c;
                            font-size: 11px;
                        }
                        .text{
                            color: #868dab;
                            font-size: 11px;
                            border-top: 1px solid #353c46;
                            padding: 10px 0px 10px;
                            margin: 10px 0px 10px;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width: 380px) {
        margin-left: 1.5em;
        .title>p:last-child{
            padding-right: 1.5em;
        }
    }
}